/*
参数说明：
alertShow-弹出框参数{
showmsg-服务器弹窗提示
msg-服务器提示内容
}
components-商品组件信息{
searchShoplist-搜索有结果时显示的商品数组
isMoney-是否显示金钱占位
isScore-是否显示积分占位
isRemove-是否显示购买按钮占位
divsize-组件一排显示几个数据
biaoqian-跳转积分详情还是商品详情界面(1 积分兑换界面  2 商品详情界面)
}
searchData-搜索接口参数{
valueName-搜索框输入的内容
order-排序规则1 销量高到低 2 价格低到高 3价格高到低
currentPage-当前页
pageSize-一页显示多少数据
pages-总页数
currentPage=pages就是最后一页
}
nottext-搜索无结果时显示的text内容Type
SearchShow-搜索有结果时显示的内容块Type
checklist-搜索无结果时和初始化进入时显示的热门推荐商品数组
pullupConfig2-上拉手势显示的内容
shopHeigth-滚动条刷新窗口动态高度设置

results-搜索框历史记录
value-如果有搜索记录框点击的哪一条的val
priceItemType-控制价格是从低到高还是从高到底 3 为从高到低 2从低到高
shopType-商品1 还是服务2
方法：
getSearchList-初始化方法获得热门推荐List数组
resultClick-搜索框方法体
load2-上拉刷新方法
searchMainfn-搜索取消条件回复默认初始状态
onShow-弹窗框弹出时触发的方法
onHide-弹窗框关闭时触发的方法
getResult-历史记录方法体(暂时没用)
*/
<template>
  <div>
    <alert v-model="alertShow.showmsg" :title="'提示'" @on-show="onShow" @on-hide="onHide">{{alertShow.msg}}</alert>
    <div>
      <button-tab style="padding-bottom: 5px">
        <button-tab-item v-if="typeNumber===1" @click.native="typeButtionClick(1)" selected>热门</button-tab-item>
        <button-tab-item v-if="typeNumber!==1" @click.native="typeButtionClick(1)">热门</button-tab-item>
        <button-tab-item v-if ='priceItemType===2&&typeNumber===3' @click.native="typeButtionClick(2)" selected>价格<img src="../../../../src/assets/images/shopMall/pricelowB.png" style="margin-top: 5px" width="12px" height="12px"></button-tab-item>
        <button-tab-item v-if ='priceItemType===2&&typeNumber!==3' @click.native="typeButtionClick(2)">价格<img src="../../../../src/assets/images/shopMall/pricelowA.png" style="margin-top: 5px" width="12px" height="12px"></button-tab-item>
        <button-tab-item v-if ='priceItemType===3&&typeNumber===2' @click.native="typeButtionClick(3)" selected>价格<img src="../../../../src/assets/images/shopMall/pricehighB.png" width="12px" height="12px"></button-tab-item>
        <button-tab-item v-if ='priceItemType===3&&typeNumber!==2' @click.native="typeButtionClick(3)">价格<img src="../../../../src/assets/images/shopMall/pricehighA.png" width="12px" height="12px"></button-tab-item>
      </button-tab>
      <div v-model="itemScrollerStatus">
        <flexbox :gutter="0" wrap="wrap">
          <flexbox-item :span="6" v-for="item in components.searchShoplist" style="padding-top: 5px;">
            <div class="flex-demo" >
              <div style="margin: 0 5px 5px;border: 1px solid #f1f7ff;background-color: #ffffff">
                <div @click="shopinfoFn(item)">
                  <div>
                    <img :src="item.url" width="100%" >
                  </div>
                  <div style="height: 40px">
                    <h5 style="padding-left: 5px;padding-right: 5px;font-size: 11px;color: #636363">{{item.name}}</h5>
                  </div>
                </div>
                <div>
                  <flexbox :gutter="0" wrap="nowrap" >
                    <flexbox-item :span="12">
                      <p style="font-size: 16px;text-align:left;color: #fa0000;display: inline-block">￥{{item.nowPrice}}</p>
                      <p v-if="shopType===1 && item.oldPrice !== undefined && item.oldPrice > 0" style="font-size: 12px;text-decoration: line-through;text-align: left;color: #999999;display: inline-block">￥{{item.oldPrice}}</p>
                    </flexbox-item>
                  </flexbox>
                </div>
              </div>
            </div>
          </flexbox-item>
        </flexbox>
        <p style="font-size: 12px;color: #adadad;text-align: center;margin:10px" v-if="dataOver === true">已加载全部数据···</p>
      </div>
    </div>
  </div>
</template>
<script>
  import { Group, XButton, ButtonTab, ButtonTabItem, Alert, Card, Scroller, Masker, Flexbox, FlexboxItem, XImg } from 'vux'
  import shopGood from '../../../components/shopCommodity/shopGoods_Q.vue'
  import * as urls from '../../../api/urls'
  import {API_ROOT} from '../../../config.js'
  import $ from 'jquery'

  export default {
    components: {
      Group,
      XButton,
      shopGood,
      ButtonTab,
      ButtonTabItem,
      Alert,
      Card,
      Scroller,
      Masker,
      Flexbox,
      FlexboxItem,
      XImg
    },
    mounted: function () {
      this.$nextTick(function () {
        this.$root.$el.__vue__.$data.index = 1
        this.$root.$el.__vue__.$data.isSel1 = false
        this.$root.$el.__vue__.$data.isSel2 = true
        this.$root.$el.__vue__.$data.isSel3 = false
        this.$root.$el.__vue__.$data.isSel4 = false
      })
      let that = this
      let type = window.location.href.replace(/.*type=(\w*)&?.*/, '$1')
      let userId = window.location.href.replace(/.*userId=(\w*)&?.*/, '$1')
      if (type !== undefined && type !== '' && !isNaN(type)) {
        that.shopType = type
      }
      if (userId !== undefined && userId !== '' && !isNaN(userId)) {
        window.sessionStorage.setItem('userId', userId)
      }
      document.getElementsByClassName('weui_tab_bd')[0].style.paddingBottom = '46px'
      // 可见窗口高度
      let clientHeight = parseInt(document.body.clientHeight)
      let offsetHeight = $('.weui_tab_bd')[0].offsetHeight
      // 搜索栏高度
      let timeIdHeight = 32
      this.scrollTop = $('.weui_tab_bd')[0].scrollTop
      $('.weui_tab_bd').scroll(function (event) {
        let hight = offsetHeight - clientHeight - $('.weui_tab_bd')[0].scrollTop
        if (hight < 50) {
          if (that.upDataInfo === true) {
            that.load2()
          }
        }
      })
      // 底部菜单高度
      this.shopHeigth = (clientHeight - timeIdHeight) + 'px'
      let serviceType = window.sessionStorage.getItem('serviceType')
      if (serviceType === 'true') {
        let order = window.sessionStorage.getItem('order')
        this.SearchShow = true
        let typeNumber = window.sessionStorage.getItem('typeNumber')
        let priceItemType = window.sessionStorage.getItem('priceItemType')
        this.typeNumber = parseInt(typeNumber)
        this.priceItemType = parseInt(priceItemType)
        this.scrollTop = window.sessionStorage.getItem('scrollTop')
        this.searchData.currentPage = window.sessionStorage.getItem('currentPage')
        this.searchShopItemfn(order)
      } else {
        this.searchShopItemfn(1)
      }
    },
    data () {
      return {
        isMasker: true,
        alertShow: {
          showmsg: false,
          msg: ''
        },
        components: {
          searchShoplist: []
        },
        itemScrollerStatus: {
          pulldownStatus: 'disabled',
          pullupStatus: 'default'
        },
        arrList: [],
        checklist: [],
        upDataInfo: true,
        dataOver: false,
        shopHeigth: '',
        searchData: {
          valueName: '',
          currentPage: '1',
          pageSize: '6',
          order: '',
          pages: ''
        },
        results: ['历史记录'],
        value: '',
        shopType: '',
        scrollTop: 0,
        typeNumber: 1,
        priceItemType: 2
      }
    },
    methods: {
      weixinfn32 () {
        let that = this
        let userId = window.sessionStorage.getItem('userId')
        let logo = window.sessionStorage.getItem('LOGO')
        let url = window.location.origin
        let link = url + '/api/wxAuth/index?type=t7' + '&id=' + that.shopType + '&uid=' + userId
        that.$wechat.ready(function () {
          that.$wechat.onMenuShareAppMessage({
            title: '孝行通孝心商城', // 分享标题
            desc: '一个让子女为父母尽孝的老年服务平台', // 分享描述
            link: link, // 分享链接
            imgUrl: logo, // 分享图标
            success: function () {
              // 用户确认分享后执行的回调函数
            },
            cancel: function () {
              // 用户取消分享后执行的回调函数
            }
          })
          that.$wechat.onMenuShareTimeline({
            title: '孝行通孝心商城', // 分享标题
            link: link, // 分享链接
            imgUrl: logo, // 分享图标
            success: function () {
              // 用户确认分享后执行的回调函数
            },
            cancel: function () {
              // 用户取消分享后执行的回调函数
            }
          })
        })
        $.ajax({
          url: API_ROOT + '/api/wxAuth/jsauth?url=' + encodeURIComponent(url + '/static/index.html'),
          type: 'post',
          success: function (t) {
            if (t.status === 100) {
              let sign = t.data.sign
              let weixinConfig32 = {
                debug: false,
                appId: sign.appId,
                timestamp: sign.timeStamp,
                nonceStr: sign.nonceStr,
                signature: sign.signature,
                jsApiList: ['onMenuShareAppMessage', 'chooseWXPay', 'onMenuShareTimeline']
              }
              // 授权
              that.$wechat.config(weixinConfig32)
              // 调用ready初始化
            } else {
              that.weixinfn32()
            }
          },
          error: function (t) {
            that.weixinfn32()
          }
        })
      },
      shopinfoFn (item) {
        this.scrollTop = $('.weui_tab_bd')[0].scrollTop
        window.sessionStorage.setItem('serviceType', 'true')
        window.sessionStorage.setItem('currentPage', this.searchData.currentPage)
        window.sessionStorage.setItem('scrollTop', this.scrollTop)
        window.sessionStorage.setItem('shopId', item.shopId)
        let userId = window.sessionStorage.getItem('userId')
        window.location.href = '/api/wxAuth/go/ShopInfo_id=' + item.shopId + '&userId=' + userId
//        this.$router.push({
//          path: '/ShopInfo'
//        })
      },
      typeButtionClick (order) {
        window.sessionStorage.setItem('scrollTop', 0)
        this.scrollTop = window.sessionStorage.getItem('scrollTop')
        if (order === 1) {
          this.typeNumber = 1
          this.priceItemType = 2
        } else if (order === 2) {
          this.typeNumber = 2
          this.priceItemType = 3
        } else if (order === 3) {
          this.typeNumber = 3
          this.priceItemType = 2
        }
        window.sessionStorage.setItem('typeNumber', this.typeNumber)
        window.sessionStorage.setItem('priceItemType', this.priceItemType)
        this.searchShopItemfn(order)
      },
      searchShopItemfn (order) {
        window.sessionStorage.setItem('order', order)
        let that = this
        let numberPage = 1
        that.searchData.order = order
        let seiz = (this.searchData.currentPage) * (this.searchData.pageSize)
        this.http(urls.shopSearch, {type: this.shopType, key: '', order: that.searchData.order, currentPage: numberPage, pageSize: seiz}, function (res) {
          if (res.status === 100) {
            if (res.data.list.pages !== 0) {
              that.components.searchShoplist = []
              for (let i = 0; i < res.data.list.list.length; i++) {
                let itemObj = {}
                itemObj.url = res.data.list.list[i].imgUrl
                itemObj.name = res.data.list.list[i].name
                itemObj.shopId = res.data.list.list[i].itemId
                itemObj.nowPrice = res.data.list.list[i].nowPrice
                itemObj.oldPrice = res.data.list.list[i].oldPrice
                that.components.searchShoplist.push(itemObj)
                that.arrList.push(itemObj)
              }
              that.searchData.pages = res.data.list.pages
              if (numberPage === res.data.list.pages) {
                that.dataOver = true
                that.upDataInfo = false
              }
              that.$nextTick(function () {
                $('.weui_tab_bd')[0].scrollTop = that.scrollTop
              })
              setTimeout(() => {
                $('.weui_tab_bd')[0].scrollTop = that.scrollTop
              }, 800)
            }
            that.weixinfn32()
          } else {
            that.alertShow.showmsg = true
            that.alertShow.msg = res.errMsg
          }
        }, function (res) {
          that.alertShow.showmsg = true
          that.alertShow.msg = res
        })
      },
      load2 () {
        // 如果搜索出来就一页那就关闭刷新功能
        let that = this
        let currentPage = parseInt(that.searchData.currentPage) + 1
        this.searchData.currentPage = currentPage
        this.upDataInfo = false
        that.http(urls.shopSearch, {type: this.shopType, key: '', order: that.searchData.order, currentPage: that.searchData.currentPage, pageSize: that.searchData.pageSize}, function (res) {
          if (res.status === 100) {
            if (res.data.list.pages !== 0) {
              that.searchData.pages = res.data.list.pages
              for (let i = 0; i < res.data.list.list.length; i++) {
                let itemObj = {}
                itemObj.url = res.data.list.list[i].imgUrl
                itemObj.name = res.data.list.list[i].name
                itemObj.shopId = res.data.list.list[i].itemId
                itemObj.nowPrice = res.data.list.list[i].nowPrice
                itemObj.oldPrice = res.data.list.list[i].oldPrice
                that.components.searchShoplist.push(itemObj)
                that.arrList.push(itemObj)
              }
              if (that.searchData.currentPage >= that.searchData.pages) {
                that.itemScrollerStatus.pullupStatus = 'disabled'
              } else {
                that.itemScrollerStatus.pullupStatus = 'default'
              }
              if (that.searchData.currentPage === res.data.list.pages) {
                that.dataOver = true
                that.upDataInfo = false
              } else {
                that.upDataInfo = true
              }
            }
          } else {
            that.alertShow.showmsg = true
            that.alertShow.msg = res.errMsg
          }
        }, function (res) {
          that.alertShow.showmsg = true
          that.alertShow.msg = res
        })
      },
      onShow () {
        // 弹窗出现时触发
      },
      onHide () {
        // 弹窗关闭时触发
      }
    }
  }
</script>
<style scoped="scoped">
</style>
